<!--包含头部文件-->
{include file="public/header" /}


<style>
    #inputBox{
        width: 100%;
        height: 40px;
        border: 1px solid cornflowerblue;
        color: cornflowerblue;
        border-radius: 20px;
        position: relative;
        text-align: center;
        line-height: 40px;
        overflow: hidden;
        font-size: 16px;
    }
    #inputBox input{
        width: 114%;
        height: 40px;
        opacity: 0;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: -14%;
    }
    #imgBox{
        text-align: left;
    }
    .imgContainer{
        display: inline-block;
        width: 32%;
        height: 150px;
        margin-left: 1%;
        border: 1px solid #666666;
        position: relative;
        margin-top: 30px;
        box-sizing: border-box;
    }
    .imgContainer img{
        width: 100%;
        height: 150px;
        cursor: pointer;
    }
    .imgContainer p{
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
        height: 30px;
        background: black;
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 16px;
        font-weight: bold;
        cursor: pointer;
        display: none;
    }
    .imgContainer:hover p{
        display: block;
    }
    #pic{
    position:relative;
    }
    #pic li{
        position:relative;
        height: 142px;
        width: 142px;
        margin-top: 3px;
        float: left;
        border: 1px dashed #000000;
        margin-right: 3px;
        cursor:pointer;
        text-align: center;
    }
    /*.lubo_pic{*/
        /*height: 142px;*/
        /*width: 142px;*/
        /*margin-top: 3px;*/
        /*float: left;*/
        /*border: 1px dashed #000000;*/
        /*margin-right: 3px;*/
        /*cursor:pointer;*/
        /*text-align: center;*/
    /*}*/
    .delete-pic{background:url('__STATIC__/images/red-close-btn.gif') no-repeat;width:27px;height:27px;overflow:hidden;cursor:pointer;position:absolute;right:-7px;top:-13px;}
</style>
<body>
<article class="page-container">
    <form class="form form-horizontal" action="" method="post" id="form-good-add">
        <input type="hidden" class="input-text" value="" placeholder="" id="itemid" name="itemid"/>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>宝贝链接：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="item_url" name="item_url"/>
            </div>
            <div>
                <input type="button" class="input-text" value="一键采集" id="one_button" style="width: 100px"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text" value="" placeholder="" id="title" name="title"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品图片：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <ul id="pic">
                    <!--<li>-->
                        <!--<div class="lubo_pic" onclick="img_div(this)">-->
                            <!--<img src="__STATIC__/images/default.jpg" width="140px" height="140px" id="img_show">-->
                        <!--</div>-->
                        <!--<input id="upload_img" name="activity_img" accept="image/*" onchange="uploadImgFile(this)" type="file" style="display: none"/>-->
                        <!--<input name="itempic[]" value="" type="hidden" />-->
                    <!--</li>-->
                </ul>

            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>淘宝/天猫：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <span class="select-box" style="width: auto">
                    <select name="shoptype" id="select_cate" class="select" style="width: auto">
                    <option value="">请选择店铺类型</option>
                    <option value="B">天猫</option>
                    <option value="C">淘宝</option>
                </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品类别：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <span class="select-box" style="width: auto">
                    <select name="goodstype" id="select_goodstype" class="select" style="width: auto">
                    <option value="0">请选择商品类型</option>
                     {volist name="cate" id='vo'}
                    <option value='{$vo.id}'>{$vo.name}</option>
                    {/volist}
                </select>
                </span>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>活动类型：</label>
            <div class="formControls col-xs-8 col-sm-9 skin-minimal">
                <div class="radio-box">
                    <input name="activity_type[]" type="checkbox" id="activity-1" value="1" >
                    <label for="activity-1">9.9特价</label>
                </div>
                <div class="radio-box">
                    <input name="activity_type[]" type="checkbox" id="activity-2" value="2" >
                    <label for="activity-2">30元封顶</label>
                </div>
                <div class="radio-box">
                    <input name="activity_type[]" type="checkbox" id="activity-3" value="3">
                    <label for="activity-3">聚划算</label>
                </div>
            </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>月销量：</label>
            <div class="formControls col-xs-2 col-sm-2">
                <input type="text" class="input-text" value="" placeholder="请输入月销量" id="sell_counter" name="sell_counter"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-xs-2 col-sm-2">
                <input type="text" class="input-text" value="" placeholder="请输入淘宝/天猫价格" id="price" name="price"/>
            </div>
        </div>
        <div class="row cl" id="item_content">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>推荐理由：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <textarea  name="desc" cols="20" rows="3" class="textarea" placeholder="说点什么...100个字符以内" ></textarea>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>开始时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text" class="input-text begin_time"  id="begin_time" name="begin_time" value="" >
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>结束时间：</label>
            <div class="formControls col-xs-6 col-sm-6">
                <input type="text"class="input-text end_time"  id="end_time" name="end_time" value="">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>是否有优惠券：</label>
            <div class="formControls col-xs-8 col-sm-8">
                <span class="select-box" style="width: auto">
                    <select name="coupon" id="coupon" class="select" style="width: auto">
                    <option value="1">有</option>
                    <option value="0">无</option>
                </select>
                </span>
            </div>
        </div>
        <div id="coupon-content">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>优惠券金额：</label>
                <div class="formControls col-xs-2 col-sm-2">
                    <input type="text" class="input-text" value="" placeholder="请输入优惠券金额" id="coupon_price" name="coupon_price"/>
                </div>
            </div>

            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>优惠券链接：</label>
                <div class="formControls col-xs-6 col-sm-6">
                    <input type="text" class="input-text" value="" placeholder="请输入优惠券链接" id="coupon_url" name="coupon_url"/>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>
</article>

<!--包含footer文件-->
{include file="public/footer" /}

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="__STATIC__/js/ajaxfileupload.js"></script>
<script type="text/javascript" src="__STATIC__/layui/layui.all.js"></script>
<script type="text/javascript" src="__STATIC__/js/images/jquery.sortable.js"></script>
<script type="text/javascript" src="__STATIC__/js/images/webuploader.js"></script>
<script type="text/javascript">

    //点击图片上传
    function img_div(e) {
        var id = $(e).attr('data-id');
        $("#"+id).click();
    }
    //    上传图片
    function uploadImgFile(even) {
        var id = even.id;
        $.ajaxFileUpload
        (
            {
                url: '{:url("Upload/img_upload")}',//需要链接到服务器地址
                secureuri: false,
                fileElementId: id,
                dataType: 'json',
                success: function (data)  //服务器成功响应处理函数
                {
                    var path = data.data.path;
                    var host_path = data.data.host_path;
                    $("#"+id).next().val(path);
                    $("#"+id).prev().children(':first').attr('src',host_path);
                },
                error: function (data, status, e)//服务器响应失败处理函数
                {
                    alert(e);
                }
            }
        )
        return false;
    }
    //删除图片
    function del_pic(even) {
        layer.confirm('确认要删除吗？', {
            btn : [ '确定', '取消' ]//按钮
        }, function(index) {
            layer.close(index);
            $(even).parent().remove();
        });
    }

    $(function () {

        $('#one_button').click(function () {
            var item_url = $('#item_url').val();
            if (item_url == ''){
                alert('商品链接不能为空')
                return false;
            }
            $.ajax({
                type: 'POST',
                url: "{:url('commodity/ajax_getiteminfo')}",
                data: {item_url:item_url},
                dataType: 'json',
                success: function (data) {
                    if (data.code == 200){
                        $("input[name='itemid']").val(data.data.itemid);
                        $("#title").val(data.data.title);
                        if (data.data.shoptype == 'B'){
                            $("#select_cate").val('B');
                        }else if (data.data.shoptype == 'C'){
                            $("#select_cate").val('C');
                        }
                        $("input[name='sell_counter']").val(data.data.sell_counter);
                        $("input[name='price']").val(data.data.price);
                        $(".textarea").val(data.data.desc);
                        var html = '';
                        for (var i=0;i<data.data.itempic.length;i++){
                            html +='<li>' +
                                '<div class="delete-pic" onclick="del_pic(this)"></div>'+
                                '<div class="lubo_pic" onclick="img_div(this)" data-id="upload_img'+i+'">'+
                                '<img src="'+data.data.itempic[i]+'" width="140px" height="140px">' +
                                '</div>'+
                                '<input id="upload_img'+i+'" name="activity_img" accept="image/*" onchange="uploadImgFile(this)" type="file" style="display: none"/>' +
                                '<input name="itempic[]" value="'+data.data.itempic[i]+'" type="hidden" />' +
                                '</li>';
                        }
                        $("#pic").html(html);
                    }else {
                        layer.alert('添加失败'+data.msg+'',{
                            skin: 'layui-layer-molv' //样式类名 自定义样式
                            ,closeBtn: 0  // 是否显示关闭按钮
                            ,anim: 1 //动画类型
                            ,btn: '确认'//按钮
                            ,icon: 6  // icon
                        })
                    }
                },
                error:function () {

                }
            })
        })




        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        $("#form-good-add").validate({
            rules:{
                title:{
                    required:true,
                },
                itempic:{
                    required:true,
                },
                sell_counter:{
                    required:true,
                },
                price:{
                    required:true,
                },
                begin_time:{
                    required:true,
                },
                end_time:{
                    required:true,
                },
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var arr = new FormData(document.getElementById("form-good-add"));
                $.ajax({
                    url:"{:url('commodity/good_add')}",
                    type:"post",
                    data:arr,
                    async: true,
                    processData: false,
                    contentType: false,
                    dataType:"json",
                    success:function (data) {
                        if (data.code == 200){
                            layer.alert('添加成功',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                                ,yes:function(){
                                    layer.closeAll();
                                    parent.location.reload();
                                }
                            })
                        }else {
                            layer.alert('添加失败'+data.msg+'',{
                                skin: 'layui-layer-molv' //样式类名 自定义样式
                                ,closeBtn: 0  // 是否显示关闭按钮
                                ,anim: 1 //动画类型
                                ,btn: '确认'//按钮
                                ,icon: 6  // icon
                            })
                        }

                    },
                    error:function () {
                        layer.alert('添加失败',{
                            skin: 'layui-layer-molv' //样式类名 自定义样式
                            ,closeBtn: 0  // 是否显示关闭按钮
                            ,anim: 1 //动画类型
                            ,btn: '确认'//按钮
                            ,icon: 6  // icon
                        })
                    }
                })

            }
        });

        //根据选择的类型展示相应的表格
        $("#coupon").change(function () {
            var coupon = $(this).children('option:selected').val();
            if (coupon == 1) {
                $('#coupon-content').css('display','block');
            } else if (coupon == 0) {
                $('#coupon-content').css('display','none');
            }
        });
        //时间插件调取
        layui.use('laydate', function(){
            var laydate = layui.laydate;
            //常规用法
            laydate.render({
                elem: '.begin_time'
                ,type: 'datetime'
            });
            //常规用法
            laydate.render({
                elem: '.end_time'
                ,type: 'datetime'
            });
        });

    });
</script>

<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>